<!--
 * @Author: Jackie
 * @Date: 2021-01-03 14:26:45
 * @LastEditors: Jackie
 * @LastEditTime: 2021-01-07 22:52:47
 * @Description: 组件-切换时间维度标签
 * @FilePath: \temp-project\src\components\Dimdate.vue
-->
<template>
<div class="dimdate">
    <div class="historyIcon">
        <div class="icon">
            <icon-base  icon-name="history" width="53" height="55" viewBox="0 0 53 55" class="icons" ><icon-history /></icon-base>
        </div>
        <div class="title">历史</div>
    </div>
    <div class="realtimeIcon">
        <div class="icon">
            <icon-base  icon-name="realtime" width="53" height="55" viewBox="0 0 53 55" class="icons"><icon-realtime /></icon-base>
        </div>
        <div class="title">实时</div>
    </div>
    <div class="planIcon">
        <div class="icon">
            <icon-base  icon-name="plan" width="53" height="55" viewBox="0 0 53 55" class="icons"><icon-plan /></icon-base>
        </div>
        <div class="title">计划</div>
    </div>

</div>
  
</template>

<script>
import IconHistory from "./Icon/Icons/HistoryIcon"
import IconRealtime from "./Icon/Icons/RealtimeIcon"
import IconPlan from "./Icon/Icons/PlanIcon"
import IconBase from "./Icon/Icons/IconBase.vue"
export default {
    components:{IconBase,IconHistory,IconRealtime,IconPlan},
    mounted(){
        window.addEventListener("resize", () => this.svgResize());
        
    },
    methods:{
    svgResize(){
      const tmp=document.querySelector(".icon");
      const w=tmp.clientWidth;
      const h=tmp.clientHeight;
      const iconbase=document.querySelectorAll("icons");
      iconbase.forEach(item=>{
          item.style.cssText=`width:${w}; height:${h};`
      })
      
    }
    }


}
</script>

<style lang="less" scoped>
.dimdate{
    width: 3.3rem;//264px;
    height: 1.25rem;//100px;
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
    align-items: flex-start;
    .historyIcon{
        .icon{
            width: .6625rem;//53px;
            height: .6875rem;//55px;
            padding-bottom: .125rem;//10px
        }  
    }
    .realtimeIcon{
        .icon{
            width: .6625rem;//53px;
            height: .6875rem;//55px;
            padding-bottom: .125rem;//10px
        }
    }
    .planIcon{
        .icon{
            width: .6625rem;//53px;
            height: .6875rem;//55px;
            padding-bottom: .125rem;//10px
        } 
    }
    .title{
            color:var(--textColor--);
            font-size: .225rem;//18px;
            padding-top: .0625rem;//5px;
            font-family: "NotoSansHans-Light";
            font-weight: 300;
        }
}

</style>